<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>手机端登录界面</title>
  <script src="http://47.106.66.89:8080/js/vue.min.js"></script>
  <script src="http://47.106.66.89:8080/js/axios.min.js"></script>
  <link href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
  <script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
</head>
<body>
<div id="app">
<h1>手机端登录界面</h1>
    <div v-if="myinfo">欢迎{{myinfo.name}}</div>
<form v-else>
  账号:<input v-model="user.username"><br>
  密码:<input v-model="user.password" type="password"><br>
    <button @click.prevent="login">登录</button>
</form>
</div>
</body>

<script>
    var app = new Vue({
        el: '#app',
        data:{
            user:{
                username: "",
                password: ""
            },
            myinfo:null
        },
        methods:{
            login(){
                axios.get("/cloud-user/mobileLogin", {
                    params: this.user
                }).then(res=>{
                    if(res.data.code == 1){
                        this.$message(res.data.msg);
                        localStorage.setItem("jwt", res.headers.authorization);
                        this.myinfoUser();
                    }else{
                        this.$alert(res.data.msg);
                    }
                });
            },
            //获取用户信息
            myinfoUser(){
                var jwt = localStorage.getItem("jwt");
                axios.get("/cloud-user/myinfo", {
                    headers:{
                        Authorization: jwt
                    }
                }).then(res=>{
                    if(res.data.code == 1){
                        this.myinfo = res.data.data;
                    }
                    this.$alert(res.data.msg);
                });
            }
        },
        created(){
            if(localStorage.getItem("jwt")){
                //解析
                this.myinfoUser();
            }
        }
    });
</script>

<style>
    *{
        font-size: 1.7rem;
    }
    #app{
        width: 70vw;
        margin: 10vh auto;
    }
</style>

</html>